<template>
  <!-- 持久化：
          1：值修改了存储到浏览器
          2：初始值读取浏览器存储

      滚动条位置处理
        1：滚动过程中存储滚动条位置
        2：当再次进入该页面时将滚动条位置还原

  -->
  <div class="home">
    <van-nav-bar>
      <!-- left   right -->
      <template v-slot:left>
        <img
          class="logo"
          src="https://xpzll.gitee.io/hmtt-76/img/logo.4653c8be.png"
          alt=""
        />
      </template>
      <template #right>
        <van-button
          class="btn"
          icon="search"
          round
          color="#5aabfb"
          to="/search"
        >
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- 标签栏 -->
    <!-- 获取频道列表渲染
           1：定义api
           2:导入api
           3:进入页面调用api
           4:存储数据并渲染
    -->
    <van-tabs class="tabs" v-model="active">
      <van-tab :title="item.name" v-for="item in list" :key="item.id">
        <!-- 父传子：
         传
            <xxx :abc='parentAbc'   />
         收
            props:{
              abc:{
                type:类型,
                required:是否必传,
                default:设置默认值(简单数据类型：直接定义，复杂数据类型:()=>复杂数据类型的值)
                    如；[1,2,3]
                      default:()=>{return [1,2,3]},
                validator:(value)=>{
                       return boolean
                         true:验证通过，不报错
                         false:验证失败，报错
                }
              }
            }

            van-buttom  type='primary/success....'
             van-button.vue
                props:{
                     type:String,
                     validator:(value)=>{
                         return boolean
                         true:验证通过，不报错
                         false:验证失败，报错
                     }

                }
-->

        <ArticleList :id="item.id"></ArticleList>
      </van-tab>
      <van-icon @click="iconEvent" class="right-icon" name="wap-nav" />
    </van-tabs>
    <!-- 频道管理 -->
    <!-- <ChannelEdit
      ref="channel"
      :list="list"
      @delEvent="delEvent"
      :value="active"
      @input="active = $event"
    ></ChannelEdit> -->
    <ChannelEdit
      ref="channel"
      :list="list"
      @delEvent="delEvent"
      v-model="active"
      @addEvent="addEvent"
    ></ChannelEdit>
  </div>
</template>
<script>
import { userChannels, userChannelsPut } from '@/api/home'
import ArticleList from './components/articleList.vue'
import ChannelEdit from './components/channelEdit.vue'
export default {
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('channelList')) || [],
      active: 0
    }
  },
  created () {
    // 没数据才请求。有数据不用理
    /*
   用户是否登录
       登录
          调用接口获取最新的用户频道列表
       没登录
           判断本地存储是否有数据
               有数据：使用本地存储
               没数据：调用接口获取数据

   */
    if (this.$store.state.user.tokenObj.token) {
      this.getData()
    } else {
      if (this.list.length === 0) {
        this.getData()
      }
    }
  },
  methods: {
    async getData () {
      const res = await userChannels()
      this.list = res.data.channels
      this.save()
      console.log('频道列表', res)
    },
    // 频道管理图标点击
    iconEvent () {
      this.$refs.channel.show = true
    },
    // 删除事件
    delEvent (id) {
      // 把相应id项删除（保留list中id不等于这里形参id的项）
      // [{id:0},{id:1},{id:2}]
      this.list = this.list.filter(item => item.id !== id)
      this.save()
    },
    // 添加事件
    addEvent (item) {
      this.list.push(item)
      this.save()
    },
    // 存储
    async save () {
      /*
      如果登录了：
          发请求将数据传递到服务器
      如果没登录
          存储到本地
          list=[{id,name}]===>[{id,seq}]
    */
      if (this.$store.state.user.tokenObj.token) {
        await userChannelsPut({
          channels: this.list.map((item, index) => {
            return {
              id: item.id,
              seq: index
            }
          })
        })
      }

      // 存储我的频道到浏览器
      localStorage.setItem('channelList', JSON.stringify(this.list))
    }
  }
}
</script>
<style lang="less" scoped>
.logo {
  height: 80%;
}
.btn {
  height: 70%;
}
.tabs {
  width: 335px;
  .right-icon {
    position: absolute;
    right: -32px;
    top: 9px;
    font-size: 24px;
  }
}
</style>
